<template>
	<view class="ranking">
		<!-- 排行榜列表 -->
		<view class="rankingImg">
			<img src="/static/chonglihuanying.png" alt="" />
		</view>
		<view class="rankingTabs">
			<u-tabs :list="list4" :current="current" lineWidth="20" lineHeight="7"
				:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
			        color: '#303133',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab">
			</u-tabs>
		</view>
		<view class="rankingDiv">
			<view class="rankingList" v-for="(item,index) in listData" :key="index" @click="goDetails(item)">
				<img :src="item.photo" alt="" />
				<view class="rankingListTitle">
					{{item.title}}
				</view>
				<view class="rankingListAddress">
					<span v-if="item.address" style="margin-right: 20rpx;">{{item.address}}</span>
					<span v-if="item.distanceKm">{{item.distanceKm}}km</span>
				</view>
				<view class="rankingListReason">
					推荐理由:{{item.reason}}
				</view>
				<view class="rankingListTop">
					{{item.top}}
				</view>
			</view>
		</view>
		<view class="rankingDiv1">
			<view class="rankingList1" v-for="(item,index) in listData3" :key="index" @click="goDetails(item)">
				<view class="rankingList1Img">
					<img :src="item.photo[0]" alt="" />
				</view>
				<view class="rankingListAddress1">
					<view class="rankingListTitle1">
						{{item.title}}
					</view>
					<view class="rankingListAddress1T">
						<span v-if="item.address" style="margin-right: 20rpx;">{{item.address}}</span>
						<span v-if="item.distanceKm">{{item.distanceKm}}km</span>
					</view>
					<view class="rankingListReason1">
						推荐理由:{{item.reason}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getListDetails
	} from '@/api/home.js'
	export default {
		data() {
			return {
				current: 0,
				lineBg: '',
				list4: [{
					name: '非玩不可'
				}, {
					name: '非住不可',
				}, {
					name: '米其林指南',
				}],
				list: [],
				listData: [],
				listData3: []
			};
		},
		onLoad(e) {
			if (e.type) {
				this.current = e.type - 0
			}
			this.getList()
		},
		methods: {
			// 跳转到详情
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.aid}&type=${this.current}`
				})
			},
			// 点击标题切换
			changeTab(val) {
				this.current = val.index
				this.listData = this.list[val.index].list.slice(0, 3)
				this.listData3 = this.list[val.index].list.slice(3)
			},
			// 获取列表
			async getList() {
				let lon = this.$store.state.lonLat[0]
				let lat = this.$store.state.lonLat[1]
				let par = {
					lon: lon ? lon : null,
					lat: lat ? lat : null,
					judgement: '1'
				}
				let res = await getListDetails(par)
				if (res.code == 200) {
					this.list = res.data
					if (this.current == 0) {
						this.listData = this.list[0].list.slice(0, 3)
						this.listData3 = this.list[0].list.slice(3)
					} else if (this.current == 1) {
						this.listData = this.list[1].list.slice(0, 3)
						this.listData3 = this.list[1].list.slice(3)
					} else if (this.current == 2) {
						this.listData = this.list[2].list.slice(0, 3)
						this.listData3 = this.list[2].list.slice(3)
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.ranking {
		width: 100%;

		.rankingDiv1 {
			padding: 0 30rpx 200rpx;

			.rankingList1 {
				padding: 20rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				gap: 20rpx;

				.rankingListAddress1 {
					width: 73%;

					.rankingListReason1 {
						width: 100%;
						background-color: #9abbe661;
						margin: 0 auto;
						padding: 10rpx;
						font-size: 28rpx;
						border-radius: 5rpx;
						color: #20559a;
					}

					.rankingListAddress1T {
						margin: 20rpx 0;
						font-size: 26rpx;
						color: #666666;
					}

					.rankingListTitle1 {
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.rankingList1Img {
					width: 150rpx;
					min-height: 150rpx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}


			}
		}

		.rankingDiv {
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.rankingList {
				width: 100%;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				padding: 0 0 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				.rankingListTop {
					position: absolute;
					top: 0;
					left: 30rpx;
					padding: 10rpx 10rpx 20rpx;
					background-color: #2b7eea;
					font-size: 26rpx;
					font-weight: bold;
					border-radius: 0 0 50% 50%;
				}

				.rankingListReason {
					width: calc(100% - 40rpx);
					background-color: #9abbe661;
					margin: 0 auto;
					padding: 10rpx;
					font-size: 28rpx;
					border-radius: 5rpx;
					color: #20559a;
				}

				.rankingListAddress {
					font-size: 26rpx;
					color: #666666;
					padding: 0 20rpx;
					margin: 10rpx 0;
				}

				.rankingListTitle {
					font-size: 34rpx;
					font-weight: bold;
					padding: 0 20rpx;
					margin-top: 10rpx;
				}

				img {
					width: 100%;
					height: 450rpx;
					border-radius: 20rpx;
				}

			}
		}

		.rankingTabs {
			margin-top: -85rpx;
			padding: 0 30rpx;
			margin-bottom: 50rpx;

			::v-deep .u-tabs__wrapper__nav__item {
				background-color: #ffffff;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
		}

		.rankingImg {
			width: 100%;
			height: 400rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	page {
		background-color: #9abbe661;
	}
</style>